<template>
  <div class="ExhibitionInfoForm-container">
    <el-form
      ref="formRef"
      :model="form"
      :rules="formRules"
      class="form"
      @submit.prevent="onSubmit"
    >
      <div class="item">
        <div class="title">Logo</div>
        <el-form-item class="content" prop="logo">
          <div class="logo">
            <el-avatar :src="getLogoUrl()" :size="100" />
            <el-button
              v-if="props.mode !== 'view'"
              size="large"
              type="success"
              round
              @click="triggerFileUpload"
            >
              上传PNG/JPG/JPEG
            </el-button>
            <input
              ref="fileInput"
              type="file"
              accept="image/jpeg,image/jpg,image/png"
              style="display: none"
              @change="handleFileChange"
            />
          </div>
        </el-form-item>
      </div>

      <div class="item">
        <div class="title">注释</div>
        <div class="annotation">
          Logo上传格式:JPG，PNG，JPEG(为避免logo展示变形，建议上传比例:1:1)
        </div>
      </div>

      <div class="item" style="margin-top: 50px">
        <div class="title">公司名称(中)</div>
        <el-form-item prop="company_name_cn">
          <el-input
            v-model="form.company_name_cn"
            type="text"
            :class="{ 'view-mode-input': props.mode === 'view' }"
            placeholder="公司名称(中)"
            :disabled="props.mode === 'view'"
            style="width: 480px; height: 40px"
            @input="handleCompanyNameCnInput"
            @paste="handleCompanyNameCnPaste"
            @keypress="handleCompanyNameCnKeypress"
          />
        </el-form-item>
      </div>

      <div class="item">
        <div class="title">公司名称(英)</div>
        <el-form-item prop="company_name_en">
          <el-input
            v-model="form.company_name_en"
            type="text"
            :class="{ 'view-mode-input': props.mode === 'view' }"
            placeholder="公司名称(英)"
            :disabled="props.mode === 'view'"
            style="width: 480px; height: 40px"
            @input="handleCompanyNameEnInput"
            @paste="handleCompanyNameEnPaste"
            @keypress="handleCompanyNameEnKeypress"
          />
        </el-form-item>
      </div>

      <div class="item">
        <div class="title">地址(中)</div>
        <el-form-item prop="addres_cn">
          <el-input
            v-model="form.addres_cn"
            type="text"
            :class="{ 'view-mode-input': props.mode === 'view' }"
            placeholder="地址(中)"
            :disabled="props.mode === 'view'"
            style="width: 480px; height: 40px"
            @input="handleAddressCnInput"
            @paste="handleAddressCnPaste"
            @keypress="handleAddressCnKeypress"
          />
        </el-form-item>
      </div>

      <div class="item">
        <div class="title">地址(英)</div>
        <el-form-item prop="addres_en">
          <el-input
            v-model="form.addres_en"
            type="text"
            :class="{ 'view-mode-input': props.mode === 'view' }"
            placeholder="地址(英)"
            :disabled="props.mode === 'view'"
            style="width: 480px; height: 40px"
            @input="handleAddressEnInput"
            @paste="handleAddressEnPaste"
            @keypress="handleAddressEnKeypress"
          />
        </el-form-item>
      </div>

      <div class="item">
        <div class="title">电话</div>
        <el-form-item>
          <el-input
            v-model="phoneSegments.areaCode"
            type="text"
            placeholder="区号"
            style="width: 150px; height: 40px"
            :class="{ 'view-mode-input': props.mode === 'view' }"
            :disabled="props.mode === 'view'"
            @input="handleAreaCodeInput"
            @paste="handleAreaCodePaste"
            @keypress="handleNumberKeypress"
          />
          <el-input
            v-model="phoneSegments.mainNumber"
            type="text"
            placeholder="电话号码"
            style="width: 200px; height: 40px"
            :class="{ 'view-mode-input': props.mode === 'view' }"
            :disabled="props.mode === 'view'"
            @input="handleMainNumberInput"
            @paste="handleMainNumberPaste"
            @keypress="handleNumberKeypress"
          />
          <el-input
            v-model="phoneSegments.extension"
            type="text"
            placeholder="分机"
            style="width: 150px; height: 40px"
            :class="{ 'view-mode-input': props.mode === 'view' }"
            :disabled="props.mode === 'view'"
            @input="handleExtensionInput"
            @paste="handleExtensionPaste"
            @keypress="handleNumberKeypress"
          />
        </el-form-item>
      </div>

      <el-form-item class="bottom">
        <div class="button-group">
          <el-button
            size="large"
            :style="getCancelButtonStyle()"
            @click="handleCancel"
            >取消</el-button
          >
          <el-button
            v-if="props.mode === 'add' || props.mode === 'edit'"
            size="large"
            type="primary"
            @click="onSubmit"
          >
            {{ props.mode === "add" ? "提交" : "修改" }}
          </el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted, computed } from "vue";
import { ElMessage } from "element-plus";
import {
  submitExhibition,
  updateExhibition,
  uploadImage,
  ImagePath
} from "@/api/exhibitionInfo";
import {
  validateUploadFile,
  FileType,
  updateUploadConfig
} from "@/utils/uploadFile";
import {
  exhibitionFormRules,
  validatePhoneNumber,
  validateForm,
  validateLogoFile
} from "./utils/validation";
import { getExhibitorId } from "@/utils/getExhibitorId";

interface Props {
  mode?: "add" | "view" | "edit";
  initialData?: any;
}

const props = withDefaults(defineProps<Props>(), {
  mode: "add",
  initialData: null
});

const emit = defineEmits(["cancel", "confirm"]);

// 表单引用
const formRef = ref();

// 表单验证规则
const formRules = exhibitionFormRules;

// do not use same name with ref
const form = ref({
  id: "",
  exhibitor_id: getExhibitorId() || 0,
  logo: "",
  company_name_cn: "",
  company_name_en: "",
  addres_cn: "",
  addres_en: "",
  telephone: "",
  status: 3
});

// 电话号码分段数据
const phoneSegments = ref({
  areaCode: "", // 区号
  mainNumber: "", // 主号码
  extension: "" // 分机
});

// 上传Logo相关
const fileInput = ref<HTMLInputElement | null>(null);
const logoPreview = ref(""); // Logo预览URL

// 更新电话号码字段
const updateTelephone = () => {
  const segments = [];
  if (phoneSegments.value.areaCode) segments.push(phoneSegments.value.areaCode);
  if (phoneSegments.value.mainNumber)
    segments.push(phoneSegments.value.mainNumber);
  if (phoneSegments.value.extension)
    segments.push(phoneSegments.value.extension);

  form.value.telephone = segments.join("-");
};

// 解析电话号码到分段
const parseTelephone = (telephone: string) => {
  if (!telephone) return;

  const parts = telephone.split("-");
  if (parts.length === 1) {
    // 如果没有分隔符，整个号码显示在中间输入框
    phoneSegments.value.areaCode = "";
    phoneSegments.value.mainNumber = telephone;
    phoneSegments.value.extension = "";
  } else {
    // 有分隔符，正常分割
    phoneSegments.value.areaCode = parts[0] || "";
    phoneSegments.value.mainNumber = parts[1] || "";
    phoneSegments.value.extension = parts[2] || "";
  }
};

// 验证单个字段
const validateField = (fieldName: string) => {
  if (formRef.value) {
    formRef.value.validateField(fieldName);
  }
};

// 中文公司名称输入处理 - 只允许中文、英文、数字、空格、连字符和括号
const handleCompanyNameCnInput = (value: string) => {
  const filteredValue = value.replace(
    /[^a-zA-Z0-9\u4e00-\u9fa5\s\-\(\)（）]/g,
    ""
  );
  form.value.company_name_cn = filteredValue;
};

// 中文公司名称粘贴处理
const handleCompanyNameCnPaste = (event: ClipboardEvent) => {
  event.preventDefault();
  const pastedText = event.clipboardData?.getData("text") || "";
  const filteredValue = pastedText.replace(
    /[^a-zA-Z0-9\u4e00-\u9fa5\s\-\(\)（）]/g,
    ""
  );
  if (filteredValue) {
    form.value.company_name_cn = filteredValue;
  }
};

// 中文公司名称键盘输入处理
const handleCompanyNameCnKeypress = (event: KeyboardEvent) => {
  const allowedKeys = [
    "a",
    "b",
    "c",
    "d",
    "e",
    "f",
    "g",
    "h",
    "i",
    "j",
    "k",
    "l",
    "m",
    "n",
    "o",
    "p",
    "q",
    "r",
    "s",
    "t",
    "u",
    "v",
    "w",
    "x",
    "y",
    "z",
    "A",
    "B",
    "C",
    "D",
    "E",
    "F",
    "G",
    "H",
    "I",
    "J",
    "K",
    "L",
    "M",
    "N",
    "O",
    "P",
    "Q",
    "R",
    "S",
    "T",
    "U",
    "V",
    "W",
    "X",
    "Y",
    "Z",
    "0",
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "Backspace",
    "Delete",
    "ArrowLeft",
    "ArrowRight",
    "Tab",
    "Enter",
    " ",
    "-",
    "(",
    ")"
  ];

  if (!allowedKeys.includes(event.key)) {
    event.preventDefault();
  }
};

// 英文公司名称输入处理 - 只允许英文、数字、空格、连字符、括号、&、.和逗号（禁止中文）
const handleCompanyNameEnInput = (value: string) => {
  const filteredValue = value.replace(/[^a-zA-Z0-9\s\-\(\)&.,]/g, "");
  form.value.company_name_en = filteredValue;
};

// 英文公司名称粘贴处理
const handleCompanyNameEnPaste = (event: ClipboardEvent) => {
  event.preventDefault();
  const pastedText = event.clipboardData?.getData("text") || "";
  const filteredValue = pastedText.replace(/[^a-zA-Z0-9\s\-\(\)&.,]/g, "");
  if (filteredValue) {
    form.value.company_name_en = filteredValue;
  }
};

// 英文公司名称键盘输入处理
const handleCompanyNameEnKeypress = (event: KeyboardEvent) => {
  const allowedKeys = [
    "a",
    "b",
    "c",
    "d",
    "e",
    "f",
    "g",
    "h",
    "i",
    "j",
    "k",
    "l",
    "m",
    "n",
    "o",
    "p",
    "q",
    "r",
    "s",
    "t",
    "u",
    "v",
    "w",
    "x",
    "y",
    "z",
    "A",
    "B",
    "C",
    "D",
    "E",
    "F",
    "G",
    "H",
    "I",
    "J",
    "K",
    "L",
    "M",
    "N",
    "O",
    "P",
    "Q",
    "R",
    "S",
    "T",
    "U",
    "V",
    "W",
    "X",
    "Y",
    "Z",
    "0",
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "Backspace",
    "Delete",
    "ArrowLeft",
    "ArrowRight",
    "Tab",
    "Enter",
    " ",
    "-",
    "(",
    ")",
    "&",
    ".",
    ","
  ];

  if (!allowedKeys.includes(event.key)) {
    event.preventDefault();
  }
};

// 中文地址输入处理 - 支持中文、英文、数字、空格、连字符、括号、逗号和句号
const handleAddressCnInput = (value: string) => {
  const filteredValue = value.replace(
    /[^a-zA-Z0-9\u4e00-\u9fa5\s\-\(\)（）.,，。]/g,
    ""
  );
  form.value.addres_cn = filteredValue;
};

// 中文地址粘贴处理
const handleAddressCnPaste = (event: ClipboardEvent) => {
  event.preventDefault();
  const pastedText = event.clipboardData?.getData("text") || "";
  const filteredValue = pastedText.replace(
    /[^a-zA-Z0-9\u4e00-\u9fa5\s\-\(\)（）.,，。]/g,
    ""
  );
  if (filteredValue) {
    form.value.addres_cn = filteredValue;
  }
};

// 中文地址键盘输入处理
const handleAddressCnKeypress = (event: KeyboardEvent) => {
  const allowedKeys = [
    "a",
    "b",
    "c",
    "d",
    "e",
    "f",
    "g",
    "h",
    "i",
    "j",
    "k",
    "l",
    "m",
    "n",
    "o",
    "p",
    "q",
    "r",
    "s",
    "t",
    "u",
    "v",
    "w",
    "x",
    "y",
    "z",
    "A",
    "B",
    "C",
    "D",
    "E",
    "F",
    "G",
    "H",
    "I",
    "J",
    "K",
    "L",
    "M",
    "N",
    "O",
    "P",
    "Q",
    "R",
    "S",
    "T",
    "U",
    "V",
    "W",
    "X",
    "Y",
    "Z",
    "0",
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "Backspace",
    "Delete",
    "ArrowLeft",
    "ArrowRight",
    "Tab",
    "Enter",
    " ",
    "-",
    "(",
    ")",
    ".",
    ","
  ];

  if (!allowedKeys.includes(event.key)) {
    event.preventDefault();
  }
};

// 英文地址输入处理 - 只允许英文、数字、空格、连字符、括号、&、.和逗号（禁止中文）
const handleAddressEnInput = (value: string) => {
  const filteredValue = value.replace(/[^a-zA-Z0-9\s\-\(\)&.,]/g, "");
  form.value.addres_en = filteredValue;
};

// 英文地址粘贴处理
const handleAddressEnPaste = (event: ClipboardEvent) => {
  event.preventDefault();
  const pastedText = event.clipboardData?.getData("text") || "";
  const filteredValue = pastedText.replace(/[^a-zA-Z0-9\s\-\(\)&.,]/g, "");
  if (filteredValue) {
    form.value.addres_en = filteredValue;
  }
};

// 英文地址键盘输入处理
const handleAddressEnKeypress = (event: KeyboardEvent) => {
  const allowedKeys = [
    "a",
    "b",
    "c",
    "d",
    "e",
    "f",
    "g",
    "h",
    "i",
    "j",
    "k",
    "l",
    "m",
    "n",
    "o",
    "p",
    "q",
    "r",
    "s",
    "t",
    "u",
    "v",
    "w",
    "x",
    "y",
    "z",
    "A",
    "B",
    "C",
    "D",
    "E",
    "F",
    "G",
    "H",
    "I",
    "J",
    "K",
    "L",
    "M",
    "N",
    "O",
    "P",
    "Q",
    "R",
    "S",
    "T",
    "U",
    "V",
    "W",
    "X",
    "Y",
    "Z",
    "0",
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "Backspace",
    "Delete",
    "ArrowLeft",
    "ArrowRight",
    "Tab",
    "Enter",
    " ",
    "-",
    "(",
    ")",
    "&",
    ".",
    ","
  ];

  if (!allowedKeys.includes(event.key)) {
    event.preventDefault();
  }
};

// 区号输入处理 - 只允许数字
const handleAreaCodeInput = (value: string) => {
  const filteredValue = value.replace(/[^0-9]/g, "");
  // 限制长度为4位
  if (filteredValue.length > 4) {
    phoneSegments.value.areaCode = filteredValue.substring(0, 4);
  } else {
    phoneSegments.value.areaCode = filteredValue;
  }
  updateTelephone();
};

// 区号粘贴处理
const handleAreaCodePaste = (event: ClipboardEvent) => {
  event.preventDefault();
  const pastedText = event.clipboardData?.getData("text") || "";
  const filteredValue = pastedText.replace(/[^0-9]/g, "");
  if (filteredValue) {
    phoneSegments.value.areaCode = filteredValue.substring(0, 4);
    updateTelephone();
  }
};

// 主号码输入处理 - 只允许数字
const handleMainNumberInput = (value: string) => {
  const filteredValue = value.replace(/[^0-9]/g, "");
  // 限制长度为11位
  if (filteredValue.length > 11) {
    phoneSegments.value.mainNumber = filteredValue.substring(0, 11);
  } else {
    phoneSegments.value.mainNumber = filteredValue;
  }
  updateTelephone();
};

// 主号码粘贴处理
const handleMainNumberPaste = (event: ClipboardEvent) => {
  event.preventDefault();
  const pastedText = event.clipboardData?.getData("text") || "";
  const filteredValue = pastedText.replace(/[^0-9]/g, "");
  if (filteredValue) {
    phoneSegments.value.mainNumber = filteredValue.substring(0, 11);
    updateTelephone();
  }
};

// 分机输入处理 - 只允许数字
const handleExtensionInput = (value: string) => {
  const filteredValue = value.replace(/[^0-9]/g, "");
  // 限制长度为6位
  if (filteredValue.length > 6) {
    phoneSegments.value.extension = filteredValue.substring(0, 6);
  } else {
    phoneSegments.value.extension = filteredValue;
  }
  updateTelephone();
};

// 分机粘贴处理
const handleExtensionPaste = (event: ClipboardEvent) => {
  event.preventDefault();
  const pastedText = event.clipboardData?.getData("text") || "";
  const filteredValue = pastedText.replace(/[^0-9]/g, "");
  if (filteredValue) {
    phoneSegments.value.extension = filteredValue.substring(0, 6);
    updateTelephone();
  }
};

// 纯数字键盘输入处理
const handleNumberKeypress = (event: KeyboardEvent) => {
  const allowedKeys = [
    "0",
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "Backspace",
    "Delete",
    "ArrowLeft",
    "ArrowRight",
    "Tab",
    "Enter"
  ];

  if (!allowedKeys.includes(event.key)) {
    event.preventDefault();
  }
};

// 验证电话号码字段
const validatePhoneField = (
  fieldType: "areaCode" | "mainNumber" | "extension"
) => {
  const validation = validatePhoneNumber(phoneSegments.value);
  if (!validation.isValid) {
    const errorMessage = validation.errors.find(error =>
      error.includes(
        fieldType === "areaCode"
          ? "区号"
          : fieldType === "mainNumber"
            ? "电话号码"
            : "分机号"
      )
    );
    if (errorMessage) {
      ElMessage.error(errorMessage);
    }
  }
};

// 监听初始数据变化
watch(
  () => props.initialData,
  newData => {
    if (newData) {
      // 更新表单数据
      form.value = { ...newData };
      // 解析电话号码
      parseTelephone(newData.telephone || "");
      // 如果有图片，设置预览
      if (newData.logo) {
        logoPreview.value = newData.logo;
      } else {
        // 如果没有图片，清空预览
        logoPreview.value = "";
      }
    } else {
      // 清空表单数据
      form.value = {
        id: "",
        exhibitor_id: getExhibitorId() || 0,
        logo: "",
        company_name_cn: "",
        company_name_en: "",
        addres_cn: "",
        addres_en: "",
        telephone: "",
        status: 3 // 新增时状态为待提交
      };
      // 清空电话号码分段
      phoneSegments.value = {
        areaCode: "",
        mainNumber: "",
        extension: ""
      };
      // 清空图片预览
      logoPreview.value = "";
    }
  },
  { immediate: true }
);

// 组件挂载时初始化
onMounted(() => {
  // 设置图片上传配置，原始文件大小不超过10MB
  updateUploadConfig(FileType.IMAGE, {
    maxSize: 10 * 1024 * 1024, // 10MB
    maxSizeMB: 10 // 10MB
  });

  if (props.initialData) {
    form.value = { ...props.initialData };
    parseTelephone(props.initialData.telephone || "");
    // 如果有图片，设置预览
    if (props.initialData.logo) {
      logoPreview.value = props.initialData.logo;
    } else {
      // 如果没有图片，清空预览
      logoPreview.value = "";
    }
  }
});

const handleCancel = () => {
  emit("cancel");
};

const onSubmit = async () => {
  try {
    // 确保电话号码已更新
    updateTelephone();

    // 使用Element Plus表单验证
    if (formRef.value) {
      const valid = await formRef.value.validate();
      if (!valid) {
        ElMessage.error("请检查表单填写是否正确");
        return;
      }
    }

    // 使用自定义验证函数进行额外验证
    const formValidation = validateForm(form.value, phoneSegments.value);
    if (!formValidation.isValid) {
      ElMessage.error(formValidation.errors[0]);
      return;
    }

    // 直接使用Logo路径
    const normalizedLogo = form.value.logo;

    const submitData = {
      ...form.value,
      logo: normalizedLogo
    };

    // 根据模式调用不同API
    let result: any;
    if (props.mode === "add") {
      result = await submitExhibition(submitData);
      if (result.code === 1) {
        ElMessage.success("会刊提交成功！");
        emit("confirm", submitData);
      } else {
        ElMessage.error(result.msg || "会刊提交失败！");
        return;
      }
    } else if (props.mode === "edit") {
      result = await updateExhibition(submitData);
      if (result.code === 1) {
        ElMessage.success("会刊修改成功！");
        emit("confirm", submitData);
      } else {
        ElMessage.error(result.msg || "会刊修改失败！");
        return;
      }
    }
  } catch (error) {
    console.error("提交失败:", error);
    ElMessage.error("提交失败，请重试");
  }
};

const triggerFileUpload = () => {
  fileInput.value?.click();
};

// 上传图片到服务器
const uploadImageToServer = async (file: File): Promise<string | ImagePath> => {
  try {
    const response: any = await uploadImage(file);

    if (response.code === 1) {
      // 兼容后端返回 string 或 { url, full_url }
      return response.data as string | ImagePath;
    } else {
      throw new Error(response.msg || "图片上传失败");
    }
  } catch (error) {
    console.error("图片上传失败:", error);
    throw error;
  }
};

const handleFileChange = async (event: Event) => {
  const target = event.target as HTMLInputElement;
  const file = target.files ? target.files[0] : null;

  // 清空文件输入，允许重复选择同一文件
  if (target) {
    target.value = "";
  }

  if (file) {
    console.log("选择的文件:", file);

    // 使用新的Logo验证函数
    const logoValidation = validateLogoFile(file);
    if (!logoValidation.isValid) {
      ElMessage.error(logoValidation.errors[0]);
      return;
    }

    try {
      // 生成预览URL
      logoPreview.value = URL.createObjectURL(file);

      // 上传图片到服务器（可能返回字符串或对象）
      const imagePath = await uploadImageToServer(file);
      console.log("服务器返回的图片路径:", imagePath);

      if (!imagePath) {
        throw new Error("上传失败，没有获取到图片路径");
      }

      // 解析为字符串 url
      const urlString =
        typeof imagePath === "string"
          ? imagePath
          : imagePath.url || imagePath.full_url || "";

      if (!urlString) {
        throw new Error("上传失败，未解析到有效的图片地址");
      }

      // 将服务器返回的图片路径保存到表单
      form.value.logo = urlString;
      console.log("赋值后的form.value.logo:", form.value.logo);
      console.log("赋值后的form.value:", form.value);

      ElMessage.success("Logo上传成功");
    } catch (error) {
      console.error("Logo上传失败:", error);
      ElMessage.error("Logo上传失败，请重试");
      // 清空预览
      logoPreview.value = "";
      // 清空表单数据
      form.value.logo = "";
    }
  }
};

// 输入框样式
const textareaStyle = ref({
  width: "480px",
  height: "40px"
});

// 获取Logo URL
const getLogoUrl = () => {
  // 如果是编辑或新增模式且有预览图片，使用预览图片
  if (props.mode !== "view" && logoPreview.value) {
    // 如果是Base64数据，直接使用
    if (logoPreview.value.startsWith("data:")) {
      return logoPreview.value;
    }
    // 如果是相对路径，使用OSS域名拼接
    if (logoPreview.value.startsWith("/")) {
      const BASE_URL = "https://exhibition-bucket.oss-cn-beijing.aliyuncs.com";
      return `${BASE_URL}${logoPreview.value}`;
    }
    // 如果是完整URL，直接使用
    if (logoPreview.value.startsWith("http")) {
      return logoPreview.value;
    }
    return logoPreview.value;
  }

  // 如果有表单数据中的图片
  if (form.value.logo) {
    // 如果是Base64数据，直接使用
    if (form.value.logo.startsWith("data:")) {
      return form.value.logo;
    }
    // 使用新的OSS域名拼接
    const BASE_URL = "https://exhibition-bucket.oss-cn-beijing.aliyuncs.com";
    return `${BASE_URL}${form.value.logo}`;
  }

  return "/placeholder-logo.png";
};

// 获取取消按钮样式
const getCancelButtonStyle = () => {
  if (props.mode === "view") {
    return { marginLeft: "300px" };
  } else {
    return { marginLeft: "270px" };
  }
};
</script>
<style lang="scss" scoped>
.ExhibitionInfoForm-container {
  height: 600px;
  overflow-y: auto;

  // 查看模式下的输入框样式（与发票页面保持一致）
  :deep(.view-mode-input .el-input__wrapper) {
    cursor: not-allowed !important;
    background-color: #f7f7f7 !important;
    border: 1px solid #e0e0e0 !important;

    .el-input__inner {
      color: #999 !important;
      cursor: not-allowed !important;
      background-color: transparent !important;
    }
  }

  .form {
    display: flex;
    flex-direction: column;
    padding: 20px;

    .item {
      display: flex;
      justify-content: space-between;
      width: 690px;
      padding-right: 30px;

      .title {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 150px;
        height: 40px;
        background-color: #f8f9fa;
      }

      .content {
        .logo {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-evenly;
          width: 530px;
          height: 200px;
        }
      }

      .annotation {
        display: flex;
        align-items: center;
        justify-content: center;
        color: red;
      }
    }

    .bottom {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;

      .button-group {
        display: flex;
        gap: 16px;
        align-items: center;
      }
    }
  }
}
</style>
